<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="mycanvas" width="800px" height="600px"></canvas>
		<script type="text/javascript">
			const mycanvas = document.getElementById('mycanvas');
			const ctx = mycanvas.getContext('2d');
			
			// 画五角星
			function drawStar(ctx,r,angle){
			  ctx.save();
			  ctx.rotate(Math.PI/3);
			  ctx.save();
			  ctx.beginPath()
			  ctx.moveTo(r,0);
			  for (var i=0;i<9;i++){
			    ctx.rotate(Math.PI/5);
			    if(i%2 == 0) {
			      ctx.lineTo((r/0.525731)*0.200811,0);
			    } else {
			      ctx.lineTo(r,0);
			    }
			  }
			  ctx.closePath();
			  ctx.stroke();
			  ctx.restore();
			  ctx.restore();
			}
			
			ctx.save();
			ctx.translate(580 , 380);
			drawStar(ctx , 180.0);
			ctx.restore();
			ctx.clip();
			
			ctx.save();
			ctx.translate(400 , 200);
			
			ctx.rect(0 , 0 , 360 , 360);
			ctx.stroke();
			var count = 1;
			for(let i = 0 ; i < 12 ; i ++) {
				for(let j = 0 ; j < 12 ; j ++) {
					ctx.save();
					if(i % 2 === 0) {
						if(count % 2 === 1) {
							ctx.fillStyle = 'white';
						} else {
							ctx.fillStyle = 'deepskyblue';
						}
					} else {
						if(count % 2 === 1) {
							ctx.fillStyle = 'deepskyblue';
						} else {
							ctx.fillStyle = 'white';
						}
					}
					ctx.fillRect(j*360/12 ,i*360/12 , 360 /12 , 360 / 12);
					ctx.restore();
					count ++;
				}
			}
		</script>
	</body>
</html>
